<template>
    <Modal
        title="权重设置"
        :value="value"
    >
        <div class="weight-setting">
            <div class="weight--th">
                <span class="weight--td">指标</span>
                <span class="weight--td">考试</span>
                <span class="weight--td">实训</span>
                <span class="weight--td">教师打分</span>
            </div>
            <div>
                <div class="weight--td">权重（100%）</div>
                <div class="weight--td">
                    <inputNumber type="number" size="small" v-model="params.examWeight"/>%
                </div>
                <div class="weight--td">
                    <inputNumber type="number" size="small" v-model="params.trainingWeight"/>%
                </div>
                <div class="weight--td">
                    <inputNumber type="number" size="small" v-model="params.teacherWeight"/>%
                </div>
            </div>
        </div>
        <div slot="footer">
            <Button type="text" @click="cancel">取消</Button>
            <Button type="primary" @click="ok">确定</Button>
        </div>
    </Modal>
</template>
<script>
export default {
    props: {
        value: {
            default: false,
            type: Boolean
        },
        data: {
            default: () => {},
            type: Object
        }
    },
    data () {
        return {
            params: {
                examWeight: 0,
                trainingWeight: 0,
                teacherWeight: 0
            }
        }
    },
    mounted () {
        console.log(this.data)
        this.params.examWeight = parseInt(this.data.exam)
        this.params.trainingWeight = parseInt(this.data.training)
        this.params.teacherWeight = parseInt(this.data.teacher)
    },
    methods: {
        add (total) {

        },
        ok (v) {
            if (this.params.examWeight + this.params.trainingWeight + this.params.teacherWeight != 100) {
                this.$Message.error('权重之和需等于100%')
                return
            }
            this.$emit('setWeight', this.params)
            this.$emit('closeWeight')
        },
        cancel () {
            this.$emit('closeWeight')
        }
    }
}
</script>
<style lang="less" scoped>
.weight-setting {
    border: 1px solid #eee;
}

.weight--th {
    background-color: #f5f7f9;
    span {
        display: inline-block;

    }
}
.weight--td {
    display: inline-block;
    width: 25%;
    text-align: center;
    padding: 6px;
}
.weight--content {

}
</style>
